<template>
    <div
        class="cashprepay-contnair"
        v-loading="isLoading"
        element-loading-background="rgba(250, 250, 250, 0.7)"
    >
        <!-- 分期记录查询 -->
        <!-- <el-card
      shadow="never"
      v-loading="isLoading"
      element-loading-background="rgba(250, 250, 250, 0.7)"
        >-->
        <cardComponent pageTitle="分期记录查询">
            <template slot="cardBody">
                <!-- <div slot="headerss" class="clearfix">
        <span>分期记录查询</span>
        <el-button style="float: right; padding: 3px 20px;" type="text" @click="showTrial=false">关 闭</el-button>
                </div>-->
                <div class="form-row">
                    <el-form
                        ref="sizeFormRef"
                        :rules="sizeFormRules"
                        :model="sizeForm"
                        label-width="120px"
                        size="small"
                    >
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="账户类别 : ">
                                    <el-input
                                        disabled
                                        v-model="sizeForm.CATEGORY"
                                        style="width: 100%;"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="主卡卡号 : ">
                                    <el-input
                                        disabled
                                        v-model="sizeForm.CARDNBR"
                                        style="width: 100%;"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="分期付款类型 : " prop="MPTYPE">
                                    <el-select
                                        v-model="sizeForm.MPTYPE"
                                        placeholder="请选择分期付款类型"
                                        @change="onTrial('sizeFormRef', '1')"
                                        style="width: 100%;"
                                    >
                                        <el-option label="全部" value="Z"></el-option>
                                        <el-option
                                            v-for="(item, index) in srcMapList"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.code"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="起始日期 : " prop="BEGDAY">
                                    <dataTime
                                        start
                                        @startT="startT"
                                        :endDates="sizeForm.ENDDAY"
                                        :a="sizeForm.BEGDAY"
                                    ></dataTime>
                                    <!-- <el-input
                    placeholder="格式 ： YYYYMMDD"
                    v-model="sizeForm.BEGDAY"
                    style="width: 100%;"
                                    ></el-input>-->
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="结束日期 : " prop="ENDDAY">
                                    <dataTime
                                        end
                                        @endT="endT"
                                        :startDates="sizeForm.BEGDAY"
                                        :b="sizeForm.ENDDAY"
                                    ></dataTime>
                                    <!-- <el-input
                    placeholder="格式 ： YYYYMMDD"
                    v-model="sizeForm.ENDDAY"
                    style="width: 100%;"
                                    ></el-input>-->
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item size="large" label-width>
                                    <el-button
                                        type="primary"
                                        size="small"
                                        @click="onTrial('sizeFormRef')"
                                    >查 询</el-button>
                                    <el-button type="primary" size="small" @click="onReset">重 置</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <!-- </el-card> -->

                <!--分期付款提前还款查询详情 -->
                <el-card shadow="never" v-if="showTrial">
                    <div slot="headerss" class="clearfix">
                        <span>分期记录查询详情</span>
                        <el-button
                            style="float: right; padding: 3px 20px;"
                            type="text"
                            @click="showTrial=false"
                        >关 闭</el-button>
                    </div>
                    <div>
                        <el-table
                            :data="tableData"
                            border
                            stripe
                            style="width: 100%;"
                            highlight-current-row
                            class="heard-bg business_table"
                        >
                            <el-table-column prop="BEGYM_1" label="交易日期" min-width="95"></el-table-column>
                            <el-table-column prop="DESC1" label="描述" min-width="68">
                                <template slot-scope="scope">
                                    <span>{{scope.row.DESC1}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="STATUS_1" label="状态" min-width="78"></el-table-column>
                            <el-table-column prop="MPTYP_1" label="分期付款类型" min-width="80"></el-table-column>
                            <el-table-column prop="CURRNUM_1" label="币种" min-width="63"></el-table-column>
                            <el-table-column prop="CARDNBR_1" label="卡号" min-width="55"></el-table-column>
                            <el-table-column prop="MPAMT" label="分期付款金额" min-width="70"></el-table-column>
                            <el-table-column prop="MPMTHS" label="期数" min-width="45"></el-table-column>
                            <el-table-column prop="MPINSTAL" label="月还款额" min-width="65"></el-table-column>
                            <el-table-column prop="FEEAMT" label="手续费金额" min-width="65"></el-table-column>
                            <el-table-column prop="LASTBPL" label="上月已摊消本金" min-width="77"></el-table-column>
                            <el-table-column prop="INSTCNT" label="已摊消次数" min-width="65"></el-table-column>
                            <el-table-column prop="PAYAMT" label="已摊消金额" min-width="75"></el-table-column>
                            <el-table-column prop="PPLMTHS" label="剩余期数" min-width="65"></el-table-column>
                            <el-table-column prop="REMPBAL" label="剩余未摊消本金" min-width="75"></el-table-column>
                        </el-table>
                        <div class="footer">
                            <!-- <el-button type="primary" size="small" @click="onChoice">提前还款</el-button> -->
                            <el-button
                                :disabled="currentPageIndex <= 0"
                                type="primary"
                                size="small"
                                @click="handleChangePage('pre')"
                            >上一页</el-button>
                            <el-button
                                :disabled="nextButtonFlag"
                                type="primary"
                                size="small"
                                @click="handleChangePage('next')"
                            >下一页</el-button>
                            <!-- <el-button size="small" @click="showTrial = false">关闭</el-button> -->
                        </div>
                    </div>
                </el-card>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import dataTime from '@/components/datePocker/TimeStartToEnd.vue';
import ConfirmWindow from '@/components/ConfirmWindow/ConfirmWindow.vue';
import { getDictSelectList, getDictMappingValue } from '@/utils/Common';
import { get_4xxx, get_3xxx } from '@/apis/getAPIClass';
import { setNumber, ChangePage } from '@/utils/Object';

export default {
    data() {
        return {
            sizeForm: {
                CATEGORY: '',
                CARDNBR: '',
                CARDNAME: '',
                BEGDAY: '',
                ENDDAY: '',
                MPTYPE: 'Z',
            },
            sizeFormRules: {
                MPTYPE: [
                    {
                        required: true,
                        message: '请选择分期付款类型！',
                        trigger: 'change',
                    },
                ],
                BEGDAY: [
                    {
                        required: true,
                        message: '请输入正确的起始日期！',
                        trigger: 'blur',
                    },
                ],
                ENDDAY: [
                    {
                        required: true,
                        message: '请输入正确的终止日期！',
                        trigger: 'blur',
                    },
                ],
            },
            tableData: [],
            ApplyCashForm: [],
            id: '',
            showTrial: false,
            isLoading: false,
            currentRow: null,
            srcMapList: [],
            pagingDataList: [], // 翻页上送字段列表
            currentPageIndex: 0, // 当前页,
            nextButtonFlag: true, // 下翻页按钮 显示控制阀
            MPNO: '0', // 翻页分期付款序号首次查询时送起始序号，默认为0 下翻页查询时上送上次查询结果的最后一条记录返回的交易序号
            RTNIND: '', // 首次查询上送空； 下翻页查询上送1；
            BEGYM: '00000000',
            showApplydaily: false,
            STATUSList: [],
        };
    },
    async mounted() {
        // 获取账户类别
        const MY_CATEGORY = await getDictMappingValue('CATE', this.cardInfo_3004.CATEGORY, this) || this.cardInfo_3004.CATEGORY;
        this.sizeForm.CATEGORY = MY_CATEGORY;

        this.onLoadOBJ();
    },
    computed: {
        ...mapState({
            defaultParams: state => state.common.defaultParams, // 接口默认参数
            cardInfo_3004: state => state.common.cardInfo_3004,
            cardList_3601: state => state.common.cardList_3601,
        }),
    },
    name: 'allquiryofInstalment',
    components: {
        cardComponent,
        ConfirmWindow,
        dataTime,
    },
    methods: {
        async onLoadOBJ() {
            this.sizeForm.CARDNBR = this.cardInfo_3004.CARDNO;
            this.srcMapList = await getDictSelectList('MPTYP', this);
            this.STATUSList = await getDictSelectList('MPSTATUS', this);
            console.log(this.STATUSList);
        },
        onTrial(ref, a = '') {
            if (!this.sizeForm.ENDDAY && !this.sizeForm.BEGDAY && a == '1') return false;
            this.$refs[ref].validate(async (valid) => {
                if (!valid) return false;
                this.tableData = [];
                this.isLoading = true;
                this.currentRow = null;
                this.id = '';
                this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                this.MPNO = '0';
                this.RTNIND = '';
                this.BEGYM = '00000000';
                this.get_3077();
            });
        },
        // 上下页切换
        handleChangePage(type) {
            this.currentRow = null;
            this.id = '';
            if (type === 'pre') {
                // 切换到上一页
                if (this.currentPageIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                    this.MPNO = '0';
                    this.RTNIND = '';
                    this.BEGYM = '00000000';
                } else {
                    this.currentPageIndex = this.currentPageIndex - 2;
                    this.MPNO = this.pagingDataList[this.currentPageIndex].MPNO;
                    this.BEGYM = this.pagingDataList[this.currentPageIndex].BEGYM;
                }
                this.get_3077();
            } else {
                // 切换到下一页
                this.get_3077();
            }
        },
        // 重置
        onReset() {
            this.sizeForm.MPTYPE = 'Z';
            this.sizeForm.BEGDAY = '';
            this.sizeForm.ENDDAY = '';
            this.id = '';
            this.currentRow = null;
            this.$refs.sizeFormRef.resetFields();
        },
        async get_3077() {
            const appBody_3077 = {
                CARDNBR: this.sizeForm.CARDNBR || '', // 卡号,
                PINFLAG: 0,
                OPERCODE: '0', // 操作代码0:全部返回1：可提前还款的分期交易2：可撤销的分期交易
                MPTYPE: this.sizeForm.MPTYPE, // 分期付款类型
                OPT: '1', // 查询方式
                BEGDAY: this.sizeForm.BEGDAY, // 起始日期
                ENDDAY: this.sizeForm.ENDDAY, // 终止日期
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志
                NEXTDAY: this.BEGYM, // 首次查询时送查询起始日期，下翻页查询时上送上次查询结果的最后一条记录返回的分期付款交易日期
                NEXTMPNO: this.MPNO, // 首次查询时送起始序号，默认为0 下翻页查询时上送上次查询结果的最后一条记录返回的交易序号 选填
            };

            let bool = false;
            if (this.pagingDataList.length === 0) bool = true;
            console.log(bool, this.pagingDataList.length);
            const res_3077 = await get_3xxx(
                '3077',
                '分期记录查询',
                appBody_3077,
                this,
                true,
                bool,
            );
            this.isLoading = false;
            if (!res_3077) {
                if (this.pagingDataList.length != 0) {
                    this.$message.warning('已经到最后一条数据');
                }
                this.nextButtonFlag = true;
                return false;
            }
            // 数据成功之后
            const res = res_3077.body.appBody.dataList;
            // 设置数据
            this.set3077Data(res);
            this.tableData = [...res];

            this.showTrial = true;
            // 翻页设置
            ChangePage(this, ['BEGYM', 'MPNO'], 'tableData', 5);
        },
        set3077Data(res) {
            res.forEach((e) => {
                e.CARDNBR = e.CARDNBR.trim();
                e.CARDNBR_1 = e.CARDNBR.substring(e.CARDNBR.length - 4);
                if ((`${e.BEGYM}`).trim()) e.BEGYM_1 = moment(`${e.BEGYM}`).format('YYYY-MM-DD');
                // 币种
                if ((`${e.CURRNUM}`).trim() == 156) {
                    e.CURRNUM_1 = '人民币';
                } else if ((`${e.CURRNUM}`).trim() == 840) {
                    e.CURRNUM_1 = '美元';
                } else {
                    e.CURRNUM_1 = e.CURRNUM;
                }
                e.MPTYP_1 = e.MPTYPE;
                // 设置分期付款类型
                this.srcMapList.forEach((i) => {
                    if ((`${e.MPTYPE}`).trim() == i.code) {
                        e.MPTYP_1 = i.label;
                    }
                });
                // 设置状态情况
                e.STATUS_1 = e.STATUS;
                this.STATUSList.forEach((i) => {
                    if ((`${e.STATUS}`).trim() == i.code) {
                        e.STATUS_1 = i.label;
                    }
                });
            });
        },
        startT(data) {
            this.sizeForm.BEGDAY = data;
        },
        endT(data) {
            this.sizeForm.ENDDAY = data;
        },
        close(data) {
            this.showApplydaily = data;
        },
    },
};
</script>

<style  scoped lang="scss">
.cashprepay-contnair {
    /deep/.el-card__header {
        padding: 8px !important;
    }
    /deep/.form-row {
        width: 100%;
        margin: 0 auto;
        .el-form {
            //   text-align: left;
            margin: 0 auto;
            //   width: 500px;
            .el-form-item {
                text-align: left;
            }
        }
        .el-form-item__content {
            width: 220px;
        }
        .el-select,
        .el-input__inner {
            width: 100%;
        }
    }

    /deep/.el-table .cell,
    .el-table th div,
    .el-table--border td:first-child .cell,
    .el-table--border th:first-child .cell {
        padding: 5px;
        margin: 0 auto;
    }
    .el-form-item {
        text-align: left;
    }
    .footer {
        text-align: center;
        margin-top: 10px;
    }
}
</style>
